<template>
	<view class="container">
		<view class="easyPay_other">
			<view class="easyPay_other_info">
				<view class="user_info">
					<image class="user_image" :src="user.avatar" mode=""></image>
					<view class="level_name flex-center">{{ user.serviceLevelName }}</view>
				</view>
				<view class="user_name">
					{{ user.nickname }}
				</view>
				<view class="info_flex flex-between">
					<view>
						<view>ID:</view>
						<view class="num">{{ user.id }}</view>
					</view>
					<view>
						<view>交易笔数:</view>
						<view class="num">{{ user.market }}</view>
					</view>
					<view>
						<view>注册时间:</view>
						<view class="num">{{ user.createdAt }}</view>
					</view>
				</view>
			</view>

		</view>
		<view class="online_sales">
			<view class="online_sales_top flex-between">
				<view class="sale flex-center">在线出售</view>
				<view></view>
				<image class="share_img" @click="shareShowTips = true"
					src="http://www.bobei.shop/static/third/my/Slice 152.png" mode=""></image>
			</view>
			<view class="sale_list" v-for="item in list" :key="item.id">
				<view class="list_top">
					<image class="d_img" src="http://www.bobei.shop/static/third/my/Slice 126.png" mode=""></image>
					易付豆
				</view>
				<view class="list_num">
					{{ item.unitPrice }}
				</view>
				<view class="list_allNum">
					总共数量：{{ item.amount }}
				</view>
				<view class="list_surplus flex-between">
					剩余数量：{{ item.remainingAmount }}
					<view class="btn flex-center" @click.stop="onBuy(item)" v-if="!mysale">
						购买
					</view>
					<view class="btn flex-center" @click="onCancel(item)" v-if="mysale">
						撤销
					</view>
				</view>
			</view>
			<uni-load-more :status="listStatus"></uni-load-more>
		</view>
		<my-popup-tips :showTips="shareShowTips" :mask="true" type="bottom" @tipsOpen="shareTipsOpen"
			@tipsClose="shareTipsClose">
			<view class="shareTipsBox">
				<view class="tipsTitle">
					分享到
				</view>
				<view class="shareBox flex-between">
					<view class="shareItem flex-row" v-for="(item, index) in shareList" :key="index"
						@click="onShareItem(item)">
						<image class="wechatIcon" :src="item.wechatIcon"></image>
						<view class="wechatText">
							{{ item.wechatText }}
						</view>
					</view>
				</view>
			</view>
		</my-popup-tips>
		<u-popup v-model="buyShow" mode="center" width="598rpx" border-radius="14">
			<view class="buy_popup">
				<view class="tips">
					提示
				</view>
				<view class="numPrice flex">
					数量
					<u-search placeholder="" height="40" search-icon="" :show-action="false" v-model="num"></u-search>
				</view>
				<view class="numPrice flex">
					单价
					<u-search placeholder="" height="40" search-icon="" :show-action="false" :disabled="true"
						v-model="price"></u-search>

				</view>
				<text class="allPrice">总价：{{ buyTotal }}</text>

				<view @click="onBuyShow" class="btn_popup flex-center">
					购买
				</view>
			</view>
		</u-popup>
		<u-popup v-model="cancelShow" mode="center" width="598rpx" height="340rpx" border-radius="14">
			<view class="buy_popup">
				<view class="tips">
					提示
				</view>
				<text class="cancel_ flex-center">您确定要撤销吗？</text>
				<view class="btn_two flex-between">
					<view @click="cancelShow = false" class="btn_can_ btn_cal flex-center">
						取消
					</view>
					<view @click="onCancelShow" class="btn_can_ btn_con flex-center">
						确定
					</view>
				</view>
			</view>
		</u-popup>


		<my-popup-tips type="bottom" :showTips="paywayShow" @tipsOpen="paywayOpen" @tipsClose="paywayClose">
			<template #default>
				<view class="paywayBox">
					<image class="close" src="http://www.bobei.shop/static/my/payway/close.png"
						@click="paywayShow = false">
					</image>
					<view class="paywayTitle">
						选择支付方式
					</view>

					<view class="way">
						<view class="wayItem flex-between" v-for="item in actions" :key="item.id"
							@click="onWayItem(item)">
							<view class="wayItemLeft flex-row">
								<image class="wayItemLeftImg" :src="item.image"></image>
								<view class="wayItemLeftCon">
									<view class="wayItemLeftConText">
										{{ item.name }}
									</view>
									<!-- 	<view class="wayItemLeftConCard">
									123456789
								</view> -->
								</view>
							</view>
							<view class="wayItemRight">
								<image class="choose" src="http://www.bobei.shop/static/login/choose.png"
									v-if="!item.status">
								</image>
								<image class="choose" src="http://www.bobei.shop/static/login/choosed.png"
									v-if="item.status">
								</image>
							</view>
						</view>

						<view class="wayItem flex-between" @click="goMyBankCard('/pages/my/bank/myBankCard')">
							<view class="wayItemLeft flex-row">
								<image class="wayItemLeftImg" src="http://www.bobei.shop/static/my/payway/yinHang.png">
								</image>
								<view class="wayItemLeftCon">
									<view class="wayItemLeftConText">
										添加银行卡
									</view>
								</view>
							</view>
							<view class="wayItemRight">
								<view class="add flex-row">
									<view class="addText">
										去添加
									</view>
									<image class="arrowRight" src="http://www.bobei.shop/static/home/arrowRight.png"
										mode=""></image>
								</view>
							</view>
						</view>
					</view>

					<button class="paySure" :plain="true" @click="onPaySure">确认付款</button>
				</view>
			</template>
		</my-popup-tips>

		<!-- 密码框 -->
		<my-popup-tips :showTips="passShow" :mask="true" @tipsOpen="passTipsOpen" @tipsClose="passTipsClose">
			<view class="passTipsBox">
				<view class="tipsTitle flex-center">
					提示
				</view>

				<view class="tipsText flex-center">
					<input type="password" class="safeword" v-model="safeword" placeholder="请输入支付密码">
				</view>

				<view class="tipsBtnBox flex-between">
					<button class="tipsCloseBtn" :plain="true" @click="onPassTipsCloseBtn">取消</button>
					<button class="tipsSureBtn" :plain="true" :disabled="oneClick"
						@click="onPassTipsSureBtn">确定</button>
				</view>
			</view>
		</my-popup-tips>


		<my-popup-tips :showTips="showTips" @tipsOpen="tipsOpen" @tipsClose="tipsClose">
			<template #default>
				<view class="tipsBox flex-row">
					<view class="tipsTitle flex-center">
						提示
					</view>
					<image class="fail" src="http://www.bobei.shop/static/home/success.png" v-if="payReasult"></image>
					<image class="fail" src="http://www.bobei.shop/static/home/fail.png" v-if="!payReasult"></image>
					<view class="failReason" v-if="payReasult">
						支付成功
					</view>
					<view class="failReason" v-if="!payReasult">
						支付失败
					</view>
					<view class="tipsLine"></view>
					<view class="tipsBtnBox flex-center">

						<button class="sureBtn" :plain="true" @click="onSureBtn">确定</button>

					</view>
				</view>
			</template>
		</my-popup-tips>
	</view>
</template>

<script>
	import myPopupTips from "../components/my-popup-tips/my-popup-tips.vue";
	export default {
		components: {
			"my-popup-tips": myPopupTips,
		},
		data() {
			return {
				user: {},
				form: {
					page: 1,
					lastId: 0,
				},
				loading: false,
				finished: false,
				list: [],

				mysale: "",
				userid: "",
				num: '',
				price: '',
				cancelShow: false,

				buyShow: false,
				showTipsBuy: true,
				shareShowTips: false,
				shareList: [
					// #ifdef APP-PLUS
					{
						provider: "weixin",
						type: 0,
						title: "伯贝分享", // 标题
						scene: "WXSceneSession", // 微信好友
						summary: "", // 分享内容的摘要
						href: "", // type为0链接必须存在 需要拼接上商品的id
						imageUrl: "", // 缩略图
						wechatIcon: "http://www.bobei.shop/static/home/wechatIcon.png",
						wechatText: "微信",
					},
					{
						provider: "weixin",
						type: 0,
						title: "伯贝分享", // 标题
						scene: "WXSceneTimeline", // 微信朋友圈
						summary: "", // 分享内容的摘要
						href: "", // type为0链接必须存在 需要拼接上商品的id
						imageUrl: "", // 缩略图
						wechatIcon: "http://www.bobei.shop/static/home/friendIcon.png",
						wechatText: "朋友圈",
					},
					// #endif

					{
						provider: "",
						type: "",
						title: "",
						scene: "",
						summary: "", // 分享内容的摘要
						href: "", // type为0链接必须存在 需要拼接上商品的id
						imageUrl: "", // 缩略图
						wechatIcon: "http://www.bobei.shop/static/third/copyLink.png",
						wechatText: "复制链接",
					},
				],


				paywayShow: false,
				bankIcon: {
					CIB: "http://www.bobei.shop/static/my/payway/CIB.png", // 兴业银行
					ECITIC: "http://www.bobei.shop/static/my/payway/ECITIC.png", // 中信银行
					PINGANBANK: "http://www.bobei.shop/static/my/payway/PINGANBANK.png", // 平安银行
					SHB: "http://www.bobei.shop/static/my/payway/SHB.png", // 上海银行
					ABC: "http://www.bobei.shop/static/my/payway/ABC.png", // 农业银行
					BCCB: "http://www.bobei.shop/static/my/payway/BCCB.png", // 北京银行
					BOC: "http://www.bobei.shop/static/my/payway/BOC.png", // 中国银行
					BOCO: "http://www.bobei.shop/static/my/payway/BOCO.png", // 交通银行
					CCB: "http://www.bobei.shop/static/my/payway/CCB.png", // 建设银行
					CEB: "http://www.bobei.shop/static/my/payway/CEB.png", // 光大银行
					CGB: "http://www.bobei.shop/static/my/payway/CGB.png", // 广发银行
					CMBC: "http://www.bobei.shop/static/my/payway/CMBC.png", // 民生银行
					CMBCHINA: "http://www.bobei.shop/static/my/payway/CMBCHINA.png", // 招商银行
					HXB: "http://www.bobei.shop/static/my/payway/HXB.png", // 华夏银行
					ICBC: "http://www.bobei.shop/static/my/payway/ICBC.png", // 工商银行
					POST: "http://www.bobei.shop/static/my/payway/POST.png", // 邮储银行
					SPDB: "http://www.bobei.shop/static/my/payway/SPDB.png", // 浦发银安
				},
				actionsChoose: {
					name: "", // 支付方式名称
					id: "", // 支付方式id
					status: false, // 是否选中
					image: "", // 支付方式图标
					bankCardId: "", // 银行卡支付的银行卡id
					bankAbb: "", // 银行缩写大写字母
					cardNo: "", // 银行卡号
				},
				actions: [],
				actions2: [{
						name: "账户余额", // 支付方式名称
						id: "0", // 支付方式id
						status: false, // 是否选中
						image: "http://www.bobei.shop/static/my/payway/yuE.png", // 支付方式图标
						bankCardId: "", // 银行卡支付的银行卡id
						bankAbb: "", // 银行缩写大写字母
					},
					// {
					// 	name: "微信支付",
					// 	id: "1",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/weiXin.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					// },
					// {
					// 	name: "支付宝支付",
					// 	id: "2",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/zhiFuBao.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					// },
					//// 微信APP支付
					// {
					// 	name: "微信APP",
					// 	id: "11",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/weiXin.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					// },
					//// 支付宝APP支付
					// {
					// 	name: "支付宝APP",
					// 	id: "12",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/zhiFuBao.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					// },
					// {
					// 	name: "云闪付",
					// 	id: "3",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/yuShanFu.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					// },
				],
				interval: "",
				passShow: false,
				safeword: "",
				oneClick: false,

				buyId: "",
				cancelId: "",

				showTips: false,
				payReasult: false, // 支付结果 true 或 false

				inviteCode: "",
				user: {},
			}
		},
		onLoad(option) {
			this.mysale = option.mysale ? option.mysale : "";
			this.userid = option.userid ? option.userid : "";
			if (option.inviteCode) {
				uni.setStorageSync('inviteCode', option.inviteCode);
			}
		},
		onShow() {
			this.refresh();
			if (uni.getStorageSync('token')) {
				this.getBankCardList();
			}
		},
		onReachBottom() {
			this.getList();
		},
		computed: {
			listStatus() {
				if (this.finished) return "noMore";
				if (this.loading) return "loading";
				return "more";
			},
			buyTotal() {
				let b = this.num * this.price;
				return b;
			},
		},
		methods: {
			getInvInfo() {
				let that = this;
				that.$post({
					module: 'User',
					interface: 9001,
					data: {
						userId: that.user.id,
					},
				}).then(res => {
					that.inviteCode = res.inviteCode;
				})
			},
			onCancelShow() {
				this.$post({
					module: 'Market',
					interface: 4002,
					data: {
						id: this.cancelId,
					}
				}).then((res) => {
					uni.showToast({
						icon: 'none',
						duration: 1500,
						title: "操作成功",
					})
					this.refresh();
				})
			},
			onCancel(param) {
				this.cancelId = param.id;
				this.cancelShow = true;
			},
			tipsOpen(param) {
				// console.log("tips弹出", param)
			},
			tipsClose(param) {
				// console.log("tips关闭", param)
			},
			onSureBtn() {
				this.showTips = false;
				this.refresh();
			},
			onPassTipsSureBtn() {
				if (!this.safeword) {
					uni.showToast({
						title: "请输入支付密码密码",
						icon: "none",
						duration: 1500
					})
					return;
				}
				this.oneClick = true;

				this.$post({
					module: "Market",
					interface: "3001",
					data: {
						id: this.buyId,
						num: this.num,
						safeword: this.safeword,
						way: this.actionsChoose.id,
					},
				}).then(res => {
					// console.log("买入接口", res);

					if (this.actionsChoose.id == '0') { // 余额支付
						this.passShow = false;
						// this.paywayShow = false;
						this.payReasult = true;
						this.showTips = true;
						setTimeout(() => {
							this.oneClick = false;
						}, 1500)
					}
					// if (this.actionsChoose.id == '2') { // 支付宝H5支付
					// 	// #ifdef  H5
					// 	window.location.href = res.charge;
					// 	// #endif
					// 	// #ifdef  APP-PLUS
					// 	// uniapp打开浏览器
					// 	plus.runtime.openURL(res.charge);
					// 	// #endif
					// } 
					else if (this.actionsChoose.id == '4') { // 银行卡
						this.passShow = false;
						setTimeout(() => {
							this.oneClick = false;
						}, 1500)
						// 查询银行卡支付是否成功
						// 		this.interval = setInterval(() => {
						// 			this.$post({
						// 					url: "/portal/Shop",
						// 					module: "Order",
						// 					interface: "1007",
						// 					data: {
						// 						orderNo: res.trade.orderNo,
						// 					},
						// 				})
						// 				.then((resp) => {
						// 					if (resp.status == 1) {
						// 						clearInterval(this.interval);
						// 						this.passShow = false;
						// 						// this.paywayShow = false;
						// 						this.payReasult = true;
						// 						this.showTips = true;
						// 					} else if (resp.status == 0) {
						// 						// console.log("查询支付状态中")
						// 					} else {
						// 						clearInterval(this.interval);
						// 						this.passShow = false;
						// 						// this.paywayShow = false;
						// 						this.payReasult = false;
						// 						this.showTips = true;
						// 					}
						// 				})

						// 		}, 1500);
					}
				}).catch((err) => {
					// console.log("支付错误", err)
					this.passShow = false;
					// this.paywayShow = false;
					this.payReasult = false;
					this.showTips = true;
					setTimeout(() => {
						this.oneClick = false;
					}, 1500)
				})

			},
			onPassTipsCloseBtn() {
				this.passShow = false;
			},
			passTipsOpen(param) {
				this.passShow = param;
			},
			passTipsClose(param) {
				this.passShow = param;
			},
			// 银行卡列表
			getBankCardList() {
				this.$post({
					module: "Finance",
					interface: "1000",
				}).then((res) => {
					// console.log("银行卡列表", res);
					let bankCardList = [];
					res.list.forEach((item, index) => {
						bankCardList[index] = {
							name: item.cardNo,
							id: "4",
							status: false,
							image: this.bankIcon[item.bankCode] ?
								this.bankIcon[item.bankCode] :
								"http://www.bobei.shop/static/my/payway/yinHang.png",
							bankCardId: item.id,
							bankAbb: item.bankCode,
							cardNo: item.cardNo,
						};
					});

					this.actions = [...this.actions2, ...bankCardList]
					this.actions[0].status = true;
					this.actionsChoose = {
						name: this.actions[0].name,
						id: this.actions[0].id,
						status: this.actions[0].status,
						image: this.actions[0].image,
						bankCardId: this.actions[0].bankCardId,
						bankAbb: this.actions[0].bankAbb,
						cardNo: this.actions[0].cardNo,
					}
					// console.log("actions", this.actions);
				});
			},
			onWayItem(param) {
				this.actions.forEach((item) => {
					item.status = false;
					if (param.id == item.id) {
						item.status = true;
						this.actionsChoose = {
							name: item.name,
							id: item.id,
							status: item.status,
							image: item.image,
							bankCardId: item.bankCardId,
							bankAbb: item.bankAbb,
							cardNo: item.cardNo,
						}
					}
				})
			},
			submitOrder() {
				this.paywayShow = true;
			},
			onPaySure() {
				this.paywayShow = false;
				this.passShow = true;

			},
			paywayOpen(param) {
				this.paywayShow = param;
			},
			paywayClose(param) {
				this.paywayShow = param;
			},
			goMyBankCard(url) {
				this.paywayShow = false;
				uni.navigateTo({
					url: url
				})
			},
			onBuyShow() {
				if (!this.num) {
					uni.showToast({
						icon: 'none',
						duration: 1500,
						title: "请输入数量",
					})
					return;
				}
				this.buyShow = false;
				this.paywayShow = true;
			},
			onBuy(param) {
				this.price = param.unitPrice;
				this.buyId = param.id;
				this.buyShow = true;
			},




			getList() {
				if (this.loading || this.finished) return;
				this.loading = true;
				this.$post({
					module: 'Market',
					interface: 4000,
					data: {
						status: 0,
						user_id: this.userid,
						...this.form,
					}
				}).then(res => {
					this.list = [...this.list, ...res.list];
					this.user = res.user;
					this.getInvInfo();
					this.form.page = res.currentPage + 1;
					this.form.lastId = res.lastId;
					if (this.form.page > res.lastPage) {
						this.finished = true;
					}
					this.loading = false;
				}).catch(() => {
					this.loading = false;
				})
			},
			refresh() {
				this.form.page = 1;
				this.form.lastId = 0;
				this.loading = false;
				this.finished = false;
				this.list = [];
				this.getList();
			},
			shareTipsOpen(param) {
				this.shareShowTips = param;
			},
			shareTipsClose(param) {
				this.shareShowTips = param;
			},
			onShareItem(param) {
				// console.log(param, "分享")
				let that = this;
				let item = param;
				item.href = "http://www.bobei.shop/h5/#/balance/otherBalance?userid=" + that.userid + "&inviteCode=" + that
					.inviteCode; // 正式
				// item.href = "http://www.hthy.top/h5/#/balance/otherBalance?userid=" + that.userid + "&inviteCode=" + that.inviteCode; // 测试
				item.imageUrl = that.user.avatar;
				item.summary = param.title;
				if (param.wechatText !== "复制链接") {
					uni.share({
						provider: item.provider,
						scene: item.scene,
						type: item.type,
						href: item.href,
						title: item.title,
						summary: item.summary,
						imageUrl: item.imageUrl,
						success: function(res) {
							// console.log("success:" + JSON.stringify(res));
							that.shareShowTips = false;
						},
						fail: function(err) {
							// console.log("fail:" + JSON.stringify(err));
							that.shareShowTips = false;
						}
					});
				} else {
					// #ifdef H5
					that.$setClipboardData({
						data: item.href,
						success: function() {
							// console.log('copy success');
							that.shareShowTips = false;
						},
						fail: function() {
							// console.log('copy fail');
							that.shareShowTips = false;
						}
					})
					// #endif
					// #ifndef H5
					uni.setClipboardData({
						data: item.href,
						success: function() {
							// console.log('copy success');
							that.shareShowTips = false;
						},
						fail: function() {
							// console.log('copy fail');
							that.shareShowTips = false;
						}
					});
					// #endif
				}

			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #F7F6FC;

		.easyPay_other {
			height: 320rpx;
			padding: 30rpx;
			padding: 30rpx;
			background-image: url('http://www.bobei.shop/static/third/my/Slice 55.png');
			background-size: 100% 70%;
			border-radius: 0 0 24rpx 24rpx;
			box-shadow: 0rpx 4rpx 16rpx 0rpx #FF8D8B;

			.easyPay_other_info {
				width: 100%;
				height: 238rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 120rpx;
				background-image: url('http://www.bobei.shop/static/third/my/Slice 120.png');
				background-size: 100% 100%;
				position: relative;
				padding: 36rpx 40rpx;

				.user_info {
					position: absolute;
					top: -80rpx;
					left: 0;

					.user_image {
						width: 160rpx;
						height: 160rpx;
						opacity: 1;
						border: 4rpx solid #FFFFFF;
						border-radius: 50%;
					}

					.level_name {
						position: absolute;
						bottom: 10rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 110rpx;
						height: 24rpx;
						background: #FFFFFF;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						opacity: 1;
						border: 2rpx solid #FB673D;
						color: #F2615F;
						font-size: 16rpx;
					}
				}

				.user_name {
					padding-left: 140rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 600;
					color: #000000;
				}

				.info_flex {
					margin-top: 60rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 600;
					color: #000000;

					.num {
						margin-top: 20rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #999999;
						line-height: 24rpx;
					}

				}
			}
		}

		.online_sales {
			height: 400rpx;
			background: #FFFFFF;
			margin-top: 100rpx;
			border-radius: 26rpx 26rpx 0 0;

			.online_sales_top {
				height: 76rpx;
				padding: 0 30rpx;
				border-bottom: 2rpx solid #999999;
				position: relative;

				.sale {
					position: absolute;
					bottom: -2rpx;
					height: 100%;
					font-size: 32rpx;
					font-weight: 600;
					color: #F47573;
					border-bottom: 6rpx solid #F47573;
				}

				.share_img {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.sale_list {
				padding: 30rpx;

				.list_top {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;

					.d_img {
						width: 36rpx;
						height: 36rpx;
						margin-right: 20rpx;
					}
				}

				.list_num {
					margin: 20rpx 0;
					width: 180rpx;
					height: 56rpx;
					font-size: 40rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 600;
					color: #000000;
				}

				.list_surplus,
				.list_allNum {
					color: #999999;
				}

				.list_surplus {
					margin-top: 20rpx;

					.btn {
						width: 144rpx;
						height: 48rpx;
						background: #F2615F;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						opacity: 1;
						color: #FFFFFF;
					}
				}
			}
		}

		.shareTipsBox {
			background: #ffffff;
			border-radius: 32rpx 32rpx 0 0;
			padding: 40rpx 0;

			.tipsTitle {
				padding: 0 40rpx 20rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 600;
				color: #000000;
				line-height: 38rpx;
				border-bottom: 2rpx solid #999999;
			}

			.shareBox {
				margin: 40rpx 0 100rpx;
				padding: 0 40rpx;

				.shareItem {
					flex-direction: column;
					margin-right: 30rpx;

					.wechatIcon {
						width: 88rpx;
						height: 88rpx;
					}

					.wechatText {
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						margin-top: 28rpx;
					}
				}
			}

		}

		.buy_popup {
			padding: 30rpx 50rpx;

			.tips {
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 600;
				color: #000000;
				margin-bottom: 20rpx;
			}

			.numPrice {
				margin-bottom: 30rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 600;
				color: #000000;

				/deep/.u-search {
					flex: none;
					width: 300rpx !important;
					margin: 0 30rpx !important;
				}

				.num {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			.allPrice {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 28rpx;
			}



			.btn_popup {
				width: 244rpx;
				height: 60rpx;
				background: #F2615F;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin: 40rpx auto 0;
			}

			.cancel_ {
				margin: 80rpx 0 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 32rpx;
			}

			.btn_can_ {
				width: 196rpx;
				height: 60rpx;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				color: #FFFFFF
			}

			.btn_cal {
				color: #F2615F;
				border: 2rpx solid #F2615F;
			}

			.btn_con {
				background: #F2615F;
			}
		}
	}



	.paywayBox {
		width: 100%;
		background-color: #ffffff;
		border-radius: 16rpx 16rpx 0 0;
		padding-top: 44rpx;
		position: relative;
		padding-bottom: 141rpx;

		.close {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 18rpx;
			right: 20rpx;
			z-index: 1;
		}

		.paywayTitle {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 50rpx;
			text-align: center;
		}

		.way {
			margin-top: 40rpx;

			.wayItem {
				padding: 0 39rpx 0 40rpx;
				height: 110rpx;
				border-top: 2rpx solid #F5F5F5;

				.wayItemLeft {
					.wayItemLeftImg {
						width: 44rpx;
						height: 44rpx;
					}

					.wayItemLeftCon {
						margin-left: 20rpx;

						.wayItemLeftConText {
							font-size: 30rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 42rpx;
						}

						.wayItemLeftConCard {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 42rpx;
						}
					}
				}

				.wayItemRight {
					.choose {
						width: 40rpx;
						height: 40rpx;
					}

					.add {
						.addText {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 37rpx;
						}

						.arrowRight {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}

			.wayItem:nth-last-of-type(1) {
				border-bottom: 2rpx solid #F5F5F5;
			}

		}

		.paySure {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 45rpx;
			width: 610rpx;
			height: 88rpx;
			background: #F2615F;
			border-radius: 16rpx;
			margin: 40rpx auto 0;
			padding: 0;
			border: none;
		}
	}

	.passTipsBox {
		width: 550rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 30rpx;

		.tipsTitle {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.tipsText {
			margin-top: 30rpx;

			.safeword {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #736464;
				line-height: 40rpx;
				width: 100%;
				height: 60rpx;
				border: 1px solid #333333;
				border-radius: 16rpx;
				padding-left: 10rpx;
			}
		}

		.tipsBtnBox {
			width: 100%;
			margin-top: 30rpx;

			button {
				padding: 0;
				margin: 0;
				width: 200rpx;
				height: 72rpx;
				border-radius: 52rpx;
				font-size: 28rpx;
			}

			.tipsCloseBtn {
				color: #F2615F;
				border: 2rpx solid #F2615F;
			}

			.tipsSureBtn {
				color: #ffffff;
				border: none;
				background: #F2615F;
			}
		}
	}

	.tipsBox {
		width: 550rpx;
		height: 646rpx;
		padding-top: 64rpx;
		flex-direction: column;

		.tipsTitle {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 40rpx;
			margin-bottom: 80rpx;
		}

		.fail {
			width: 92rpx;
			height: 92rpx;
		}

		.failReason {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #736464;
			line-height: 40rpx;
			margin-top: 80rpx;
		}

		.tipsLine {
			width: 100%;
			height: 2rpx;
			background-color: #EBEDF0;
			margin-top: 72rpx;
		}

		.tipsBtnBox {
			margin-top: 40rpx;

			.sureBtn {
				padding: 0;
				margin: 0 26rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				width: 200rpx;
				height: 72rpx;
				background: #F2615F;
				border-radius: 52rpx;
				border: none;
			}

			.backBtn {
				padding: 0;
				margin: 0 26rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #F2615F;
				width: 200rpx;
				height: 72rpx;
				background: #ffffff;
				border-radius: 52rpx;
				border: 2rpx solid #F2615F;
			}
		}
	}
</style>
